<script setup>
import { DownloadOutlined } from '@ant-design/icons-vue'
import {getCurrentInstance} from "vue";
import Notice from "~/contentScripts/views/tao/detail/components/notice.vue";
import { isLogin } from '~/logic'
import Item from '~/utils/ali/Item'

const emit = defineEmits(['login'])
const item = getCurrentInstance().proxy.$item
const instance = getCurrentInstance()
const data = ref([])
const visible = ref(false)
const pageSize = 20
const page = ref(0)
const title = ref('')
const sellerId = ref('')
const loading = ref(false)
const loadData = async () => {
  const result = await Item.shopLike(sellerId.value, (page.value++) * pageSize)

  if (typeof result.mods === 'undefined') {
    visible.value = false
    return {
      mods: {
        pager: {
          data: {
            totalPage: 0,
            currentPage: 0,
          },
        },
        shoplist: {
          data: {
            shopItems: [],
          },
        },
      },
    }
  }

  for (let i = 0; i < result.mods.shoplist.data.shopItems.length; i++) {
    result.mods.shoplist.data.shopItems[i].index = i + 1 + ((page.value - 1) * pageSize)
    const rank = result.mods.shoplist.data.shopItems[i].shopIcon.iconClass.replace(/[^0-9]/gi, '') / 5
    const shopType = ['天猫店', '心级店', '钻级店', '皇冠店', '金冠店'][Math.ceil(rank)]
    result.mods.shoplist.data.shopItems[i].shopType = shopType
    result.mods.shoplist.data.shopItems[i].rank = rank
    result.mods.shoplist.data.shopItems[i].dsrInfo.dsr = JSON.parse(result.mods.shoplist.data.shopItems[i].dsrInfo.dsrStr)
    result.mods.shoplist.data.shopItems[i].goodratePercent = result.mods.shoplist.data.shopItems[i].dsrInfo.dsr.sgr
    if (typeof result.mods.shoplist.data.shopItems[i].icons == 'undefined')
      result.mods.shoplist.data.shopItems[i].icons = []
  }

  data.value.push(...result.mods.shoplist.data.shopItems)
  return result
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async (reset = true) => {
  console.log(item);
  if (reset)
    sellerId.value = item.sellerId()

  if (isLogin({emit}, __option)) {
    let result = {}
    title.value = `相似店铺-${item.shopName()}`
    page.value = 0
    data.value = []
    loading.value = true
    visible.value = true
    result = await loadData()
    loading.value = false
    while (result.mods.pager.data.totalPage > result.mods.pager.data.currentPage)
      result = await loadData()
  }
}
const columns = [
  {
    title: '销量排名',
    dataIndex: 'index',
    key: 'index',
    width: 100,
    slot: 'index',
    fixed: 'left',
    align: 'center',
    sorter: (a, b) => a.index - b.index,
  },
  {
    title: '店铺名称',
    dataIndex: 'title',
    key: 'title',
    // width: 200,
    fixed: 'left',
    dataType: 'custom',
    slot: 'title',
  },
  {
    title: '店铺类型',
    dataIndex: 'shopType',
    key: 'isTmall',
    dataType:'custom',
    slot: 'isTmall',
    sorter: (a, b) => a.isTmall - b.isTmall,
    width: 100,
  },
  {
    title: '信用',
    // dataIndex: 'icons',
    // key: 'icons',
    dataType:'custom',
    slot: 'icons',
    width: 140,
  },
  {
    title: '地址',
    dataIndex: 'provcity',
    key: 'provcity',
    dataType:'custom',
    slot: 'provcity',
    width: 100,
  },
  {
    title: '特色',
    dataIndex: 'shopIcon.url',
    key: 'shopIcon',
    dataType:'custom',
    slot: 'shopIcon',
    width: 100,
  },
  {
    title: '好评率',
    dataIndex: 'goodratePercent',
    key: 'goodratePercent',
    dataType:'custom',
    slot: 'goodratePercent',
    sorter: (a, b) => parseInt(a.goodratePercent) - parseInt(b.goodratePercent),
    width: 100,
  },
  {
    title: '描述相符',
    dataIndex: 'dsrInfo.dsr.mas',
    key: 'dsrDescribePercent',
    dataType:'custom',
    slot: 'dsrDescribePercent',
    sorter: (a, b) => a.dsrInfo.dsr.mas - b.dsrInfo.dsr.mas,
    width: 100,
  },
  {
    title: '服务态度',
    dataIndex: 'dsrInfo.dsr.sas',
    key: 'dsrServicePercent',
    dataType:'custom',
    slot: 'dsrServicePercent',
    sorter: (a, b) => a.dsrInfo.dsr.sas - b.dsrInfo.dsr.sas,
    width: 100,
  },
  {
    title: '物流服务',
    dataIndex: 'dsrInfo.dsr.cas',
    key: 'dsrDeliverPercent',
    dataType:'custom',
    slot: 'dsrDeliverPercent',
    sorter: (a, b) => a.dsrInfo.dsr.cas - b.dsrInfo.dsr.cas,
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    align: 'center',
    dataType:'custom',
    slot: 'action',
    fixed: 'right',
  },
]
</script>

<template>
  <div @click="handle">
    相似店铺
  </div>
  <a-modal
    v-model:visible="visible" :title="title" :style="{
      top: '60px',
    }" :footer="false" :width="1370"
  >
<!--    <div style="padding-bottom: 10px;">-->
<!--      <a-alert-->
<!--        message="星察数据下载文件和数据仅供学习与参考，切勿私自商用造成侵权！" type="warning" show-icon-->
<!--      />-->
<!--    </div>-->
<!--    <a-row type="flex" style="margin-bottom: 20px;">-->
<!--      <a-col>-->
<!--        <a-input-search v-model:value="sellerId" enter-button="查询" style="width: 260px" type="primary" placholder="请输入店铺名称或旺旺号ID" @search="handle(false)" />-->
<!--      </a-col>-->
<!--      <a-col flex="1" />-->
<!--      <a-col>-->
<!--        <a-input-search v-model:value="keywords" placeholder="全局搜索" />-->
<!--      </a-col>-->
<!--      <a-col style="margin-left: 20px;">-->
<!--        <a-button>-->
<!--          <DownloadOutlined />-->
<!--          导出表格-->
<!--        </a-button>-->
<!--      </a-col>-->
<!--    </a-row>-->
    <base-table :columns="columns" :data-source="data" :table-name="title" size="small" :scroll="{
          y:600,
          x:1320,
        }">
      <template #toolbar>
        <a-row type="flex">

          <a-col>
            <a-input-search size="small" v-model:value="sellerId" enter-button="查询" style="width: 260px" type="primary" placholder="请输入店铺名称或旺旺号ID" @search="handle(false)" />
          </a-col>
          <a-col flex="1">
            <notice/>
          </a-col>
        </a-row>
      </template>
      <template #title="record">
        <a-row type="flex">
          <a-col>
            <a-image
                :src="record.picUrl"
                :width="20"
                :height="20"
            />
          </a-col>
          <a-col flex="1">
            <a type="link" target="_blank" :href="record.shopUrl" style="margin-left: 10px;">
              {{ record.title }}
            </a>
          </a-col>
        </a-row>
      </template>
      <template #isTmall="record">
        {{ record.shopType }}
      </template>
      <template #shopIcon="record">
        <a-row :gutter="[5, 5]">
          <a-col v-for="(icon, k) in record.icons" :key="k" :span="8">
            <div :class="icon.domClass" />
          </a-col>
        </a-row>
      </template>
      <template #goodratePercent="record">
        {{ record.goodratePercent || '100%' }}
      </template>
      <template #provcity="record">
        {{ record.provcity?.replace(/\s/g, '') || '-' }}
      </template>
      <template #icons="record">
        <div v-if="record.isTmall" class="icon-tianmao" />
        <div
            v-if="!record.isTmall" class="icon-taobao" :style="{
              width: `${17 * (record.rank - Math.ceil(record.rank - 1)) * 5}px`,
              backgroundPosition: `0 -${record.rank > 3 ? 100 : 32 * Math.ceil(record.rank - 1)}px`,
            }"
        />
      </template>
      <template #dsrDescribePercent="record">
        <div class="text">
          {{ record.dsrInfo.dsr.mas }}
        </div>
        <div class="trend">
            <span
                :class="{
                red: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) < 0,
                green: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) >= 0,
              }"
            >{{ record.dsrInfo.dsr.mg }}</span>
          <div class="icon">
            <i
                :class="{
                  red: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) < 0,
                  green: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) >= 0,
                }"
            />
          </div>
        </div>
      </template>
      <template #dsrServicePercent="record">
        <div class="text">
          {{ record.dsrInfo.dsr.sas }}
        </div>
        <div class="trend">
            <span
                :class="{
                red: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) < 0,
                green: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) >= 0,
              }"
            >{{ record.dsrInfo.dsr.sg }}</span>
          <div class="icon">
            <i
                :class="{
                  red: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) < 0,
                  green: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) >= 0,
                }"
            />
          </div>
        </div>
      </template>
      <template #dsrDeliverPercent="record">
        <div class="text">
          {{ record.dsrInfo.dsr.cas }}
        </div>
        <div class="trend">
            <span
                :class="{
                red: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) < 0,
                green: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) >= 0,
              }"
            >{{ record.dsrInfo.dsr.cg }}</span>
          <div class="icon">
            <i
                :class="{
                  red: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) < 0,
                  green: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) >= 0,
                }"
            />
          </div>
        </div>
      </template>
      <template #action="record">
        <a-button type="link" target="_blank" :href="`${record.shopUrl}/category.htm?orderType=hotsell_desc&analysis=true`">
          分析店铺
        </a-button>
      </template>
    </base-table>
<!--    <a-table-->
<!--      :columns="columns" :data-source="-->
<!--        data.filter((item) => {-->
<!--          let string = JSON.stringify(item)-->
<!--          return string.includes(keywords)-->
<!--        })-->
<!--      " size="small" :scroll="{-->
<!--        y: 600,-->
<!--        x: 1320,-->
<!--      }"-->
<!--      style="min-height: 600px"-->
<!--      :pagination="false"-->
<!--      :loading="loading"-->
<!--    >-->
<!--      <template #bodyCell="{ column, record }">-->
<!--        <template v-if="column.key === 'title'">-->
<!--          <a-row type="flex">-->
<!--            <a-col>-->
<!--              <a-image-->
<!--                :src="record.picUrl"-->
<!--                :width="20"-->
<!--                :height="20"-->
<!--              />-->
<!--            </a-col>-->
<!--            <a-col flex="1">-->
<!--              <a type="link" target="_blank" :href="record.shopUrl" style="margin-left: 10px;">-->
<!--                {{ record.title }}-->
<!--              </a>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </template>-->
<!--        <template v-if="column.key === 'isTmall'">-->
<!--          {{ record.shopType }}-->
<!--        </template>-->
<!--        <template v-if="column.key === 'shopIcon'">-->
<!--          <a-row :gutter="[5, 5]">-->
<!--            <a-col v-for="(icon, k) in record.icons" :key="k" :span="8">-->
<!--              <div :class="icon.domClass" />-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </template>-->
<!--        <template v-if="column.key === 'goodratePercent'">-->
<!--          {{ record.goodratePercent || '100%' }}-->
<!--        </template>-->
<!--        <template v-if="column.key === 'provcity'">-->
<!--          {{ record.provcity?.replace(/\s/g, '') || '-' }}-->
<!--        </template>-->
<!--        <template v-if="column.key === 'icons'">-->
<!--          <div v-if="record.isTmall" class="icon-tianmao" />-->
<!--          <div-->
<!--            v-if="!record.isTmall" class="icon-taobao" :style="{-->
<!--              width: `${17 * (record.rank - Math.ceil(record.rank - 1)) * 5}px`,-->
<!--              backgroundPosition: `0 -${record.rank > 3 ? 100 : 32 * Math.ceil(record.rank - 1)}px`,-->
<!--            }"-->
<!--          />-->
<!--        </template>-->
<!--        <template v-if="column.key === 'dsrDescribePercent'">-->
<!--          <div class="text">-->
<!--            {{ record.dsrInfo.dsr.mas }}-->
<!--          </div>-->
<!--          <div class="trend">-->
<!--            <span-->
<!--              :class="{-->
<!--                red: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) < 0,-->
<!--                green: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) >= 0,-->
<!--              }"-->
<!--            >{{ record.dsrInfo.dsr.mg }}</span>-->
<!--            <div class="icon">-->
<!--              <i-->
<!--                :class="{-->
<!--                  red: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) < 0,-->
<!--                  green: parseInt(record.dsrInfo.dsr.mg.replace('%', '')) >= 0,-->
<!--                }"-->
<!--              />-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
<!--        <template v-if="column.key === 'dsrServicePercent'">-->
<!--          <div class="text">-->
<!--            {{ record.dsrInfo.dsr.sas }}-->
<!--          </div>-->
<!--          <div class="trend">-->
<!--            <span-->
<!--              :class="{-->
<!--                red: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) < 0,-->
<!--                green: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) >= 0,-->
<!--              }"-->
<!--            >{{ record.dsrInfo.dsr.sg }}</span>-->
<!--            <div class="icon">-->
<!--              <i-->
<!--                :class="{-->
<!--                  red: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) < 0,-->
<!--                  green: parseInt(record.dsrInfo.dsr.sg.replace('%', '')) >= 0,-->
<!--                }"-->
<!--              />-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
<!--        <template v-if="column.key === 'dsrDeliverPercent'">-->
<!--          <div class="text">-->
<!--            {{ record.dsrInfo.dsr.cas }}-->
<!--          </div>-->
<!--          <div class="trend">-->
<!--            <span-->
<!--              :class="{-->
<!--                red: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) < 0,-->
<!--                green: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) >= 0,-->
<!--              }"-->
<!--            >{{ record.dsrInfo.dsr.cg }}</span>-->
<!--            <div class="icon">-->
<!--              <i-->
<!--                :class="{-->
<!--                  red: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) < 0,-->
<!--                  green: parseInt(record.dsrInfo.dsr.cg.replace('%', '')) >= 0,-->
<!--                }"-->
<!--              />-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
<!--        <template v-if="column.key === 'action'">-->
<!--          <a-button type="link" target="_blank" :href="`${record.shopUrl}/category.htm?orderType=hotsell_desc&analysis=true`">-->
<!--            分析店铺-->
<!--          </a-button>-->
<!--        </template>-->
<!--      </template>-->
<!--    </a-table>-->
    <a-divider style="margin: 0 0 10px;" />
    <div style="color: #444;">
      已加载数量：{{ data.length }}
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.trend{
  color: #666;
  font-size: 12px;
  display: flex;
  align-items: center;
  .green{
    color: #52c41a;
  }
  .red{
    color: #f5222d;
  }
  .icon{
    margin-left: 5px;
    // 绿色上箭头 红色下箭头
    i{
      display: inline-block;
      width: 0;
      height: 0;
      margin-top: -2px;
      &.green{
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #52c41a;
      }
      &.red{
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #f5222d;
      }
    }
  }
}
.icon-tianmao {
  background-position: -5px -39px;
  width: 83px;
  height: 12px;
  background-image: url(https://img.alicdn.com/tps/i3/TB1bh5IMpXXXXacaXXXrG06ZpXX-316-272.png);
  background-repeat: no-repeat
}

.icon-taobao {
  text-indent: -999em;
  overflow: hidden;
  background: url(https://img.alicdn.com/tps/i1/T1zihIXkxyXXXXXXXX.png) repeat-x scroll -999em -999em transparent;
  height: 16px
}

.icon-service-quanqiugou {
  background-position: -243px -187px
}

.icon-service-quanqiugou,.icon-service-xiaobao {
  margin-right: 6px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url(https://img.alicdn.com/tps/i1/TB1HEWMMpXXXXcMXVXXrG06ZpXX-316-272.png)
}

.icon-service-xiaobao {
  background-position: -109px -199px
}

.icon-service-jinpaimaijia {
  margin-right: 6px;
  background-position: -269px -213px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url(https://img.alicdn.com/tps/i1/TB1HEWMMpXXXXcMXVXXrG06ZpXX-316-272.png)
}
</style>
